<template>


    <h1>护理单元病房分配列表</h1>
    <div class="operation-bar">
        <el-button type="primary" @click="handleAdd">添加护理单元病房分配</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
           <el-table-column prop="id" label="编号" width="200" />
        <el-table-column prop="nursingUnitCode" label="护理单元编号" width="200" />
        <el-table-column prop="name" label="护理单元名称" width="200" />
        <el-table-column prop="wardCode" label="房间" width="200" />
        <el-table-column prop="address" label="操作" width="200">
            <template #default="scope">
                <el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>
                <el-button type="danger" @click="Opperval(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>



    <!-- 添加护理单元病房分配对话框 -->
    <el-dialog v-model="dialogVisible" title="添加护理单元病房分配" width="50%">

        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="replace-work-form">
            <el-form-item label="护理单元名称:" prop="nursingUnitCode">
                <el-select v-model="form.nursingUnitCode" placeholder="请选择护理单元名称" clearable>
                    <el-option v-for="item in nurseOptions" :key="item.nursingUnitCode" :label="item.name"
                        :value="item.nursingUnitCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="房间号：" prop="wardCode">
                <el-checkbox-group v-model="form.wardCode">
                    <el-checkbox v-for="item in replace" :key="item.wardCode" :label="item.wardCode">
                        {{ item.wardCode }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <div class="form-buttons">
                    <el-button type="primary" @click="submitForm(formRef)">添加</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                    <el-button @click="cancel">取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import http from '@/api/http.js'

const router = useRouter()
const route = useRoute()
const formRef = ref<FormInstance>()
const nurseOptions: any = ref([])
const replace: any = ref([]);

const tableData:any=ref([]);//护理单元病房分配列表
const dialogVisible = ref(false)
// 添加申请
const handleAdd = () => {
    dialogVisible.value = true
    // 重置表单
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

// 表单数据
const form: any = reactive({
    nursingUnitCode: "",
    wardCode: [] as string[],

})

// 表单验证规则
const rules = reactive<FormRules>({

    nursingUnitCode: [
        { required: true, message: '请选择护理单元名称', trigger: 'change' }
    ],
    wardCode: [
        { type: 'array', required: true, min: 1, message: '请选择房间号', trigger: 'change' }
    ]
})



onMounted(() => {
    getNurseList();// 获取显示单元列表
    replaceCodeOptions();// 获取房间列表
    NursingUnitWardShow();//护理单元病房分配列表
})

// 护理单元病房分配列表
const NursingUnitWardShow = async () => {
    http.get('/api/NursingUnitWardController/GetNursingUnitWardShow').then(res => {
        // console.log(res)
        tableData.value = res;
    })

}






// 获取显示单元列表
const getNurseList = async () => {
    http.get('/api/NursingUnitWardController/NursingUnitShow').then(res => {
        // console.log(res)
        nurseOptions.value = res;
    })

}

// 获取房间列表
const replaceCodeOptions = async () => {
    http.get('/api/NursingUnitWardController/BedNursingUnitShow').then(res => {
        // console.log(res);
        replace.value = res;
    })

}

// 添加
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid) => {
        if (valid) {
            // 提交时将数组转为字符串
            const postData = {
                nursingUnitCode: form.nursingUnitCode,
                wardCode: form.wardCode.join(','),
            }
            await http.post('/api/NursingUnitWardController/AddNursingUnitWard', postData)
            ElMessage.success('添加成功')
                dialogVisible.value = false
            // router.push('/ReplaceWorkShow')
        } else {
            console.log('error submit!')
            ElMessage.error('请检查输入内容')
        }
    })
}
// 重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// 取消
const cancel = () => {
    ElMessageBox.confirm(
        '确认取消申请？未保存的内容将丢失',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        router.back()
    })
}


</script>

<style scoped>
.replace-work-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-header {
    margin-bottom: 30px;
    text-align: center;
}

.form-header h2 {
    color: #303133;
    font-weight: 500;
    margin: 0;
}

.replace-work-form {
    max-width: 800px;
    margin: 0 auto;
}

.date-picker-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-item {
    margin-bottom: 0;
}

.date-separator {
    color: #606266;
}

.form-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

:deep(.el-form-item__label) {
    font-weight: 500;
}

:deep(.el-select) {
    width: 100%;
}

:deep(.el-date-picker) {
    width: 100%;
}

@media (max-width: 768px) {
    .replace-work-container {
        padding: 15px;
    }

    .date-picker-group {
        flex-direction: column;
        align-items: stretch;
    }

    .date-separator {
        text-align: center;
        margin: 5px 0;
    }

    .form-buttons {
        flex-direction: column;
        gap: 10px;
    }
}
</style>
